<template>
  <div>
      <IncrementCount></IncrementCount>
      <DecreaseCount></DecreaseCount>
      <div>
        <el-tag type="success">{{ degValue }}</el-tag>
        <el-tag type="success">{{ fontCount }}</el-tag>
        <el-tag type="success">{{ backCount }}</el-tag>
      </div>
      <div>
        <el-input v-model="message" placeholder=""></el-input>
        <el-button type="primary" @click="send">发送</el-button>
      </div>
      <Table row-key="id" :columns="columns16" :data="data12" border></Table>
  </div>
</template>

<script>
import DecreaseCount from '@/components/test/DecreaseCount'
import IncrementCount from '@/components/test/IncrementCount'
import { EventBus } from "@/plugins/event-bus.js";
export default {
    components: {
      DecreaseCount,
      IncrementCount
    },
    data () {
      return {
        columns16: [
            {
                title: 'Name',
                key: 'name',
                tree: true
            },
            {
                title: 'Age',
                key: 'age'
            },
            {
                title: 'Address',
                key: 'address'
            }
        ],
        data12: [
            {
                id: '100',
                name: 'John Brown',
                age: 18,
                address: 'New York No. 1 Lake Park'
            },
            {
                id: '101',
                name: 'Jim Green',
                age: 24,
                address: 'London No. 1 Lake Park',
                children: [
                    {
                        id: '10100',
                        name: 'John Brown',
                        age: 18,
                        address: 'New York No. 1 Lake Park'
                    },
                    {
                        id: '10101',
                        name: 'Joe Blackn',
                        age: 30,
                        address: 'Sydney No. 1 Lake Park'
                    },
                    {
                        id: '10102',
                        name: 'Jon Snow',
                        age: 26,
                        address: 'Ottawa No. 2 Lake Park',
                        children: [
                            {
                                id: '1010200',
                                name: 'Jim Green',
                                age: 24,
                                address: 'New York No. 1 Lake Park'
                            }
                        ]
                    }
                ]
            },
            {
                id: '102',
                name: 'Joe Black',
                age: 30,
                address: 'Sydney No. 1 Lake Park'
            },
            {
                id: '103',
                name: 'Jon Snow',
                age: 26,
                address: 'Ottawa No. 2 Lake Park'
            }
        ],
        degValue:0,
        fontCount:0,
        backCount:0,
        message: '',
        words_result:[{"card_info":{"card_location":{"top":18,"left":17,"width":137,"height":205},"card_type":"idcard_front","direction":3,"idcard_number_type":1,"image_status":"normal"},"card_result":{"姓名":{"location":{"top":62,"left":127,"width":10,"height":23},"words":"邹丹"},"民族":{"location":{"top":102,"left":112,"width":8,"height":7},"words":"汉"},"住址":{"location":{"top":56,"left":65,"width":22,"height":83},"words":"四川省广汉市小汉镇小南村6组63号"},"公民身份号码":{"location":{"top":88,"left":33,"width":13,"height":112},"words":"510681198810063829"},"出生":{"location":{"top":59,"left":95,"width":9,"height":67},"words":"19881006"},"性别":{"location":{"top":60,"left":110,"width":9,"height":7},"words":"女"}}},{"card_info":{"card_location":{"top":33,"left":157,"width":122,"height":201},"card_type":"idcard_front","direction":3,"idcard_number_type":1,"image_status":"normal"},"card_result":{"姓名":{"location":{"top":77,"left":256,"width":9,"height":24},"words":"刁小玲"},"民族":{"location":{"top":112,"left":241,"width":9,"height":8},"words":"汉"},"住址":{"location":{"top":69,"left":198,"width":21,"height":80},"words":"成都市新都区军屯镇郭家村9组"},"公民身份号码":{"location":{"top":101,"left":168,"width":14,"height":109},"words":"510125199401062629"},"出生":{"location":{"top":71,"left":225,"width":10,"height":66},"words":"19940106"},"性别":{"location":{"top":74,"left":240,"width":9,"height":8},"words":"女"}}},{"card_info":{"card_location":{"top":239,"left":23,"width":134,"height":201},"card_type":"idcard_front","direction":3,"idcard_number_type":1,"image_status":"normal"},"card_result":{"姓名":{"location":{"top":273,"left":134,"width":11,"height":28},"words":"张国庆"},"民族":{"location":{"top":315,"left":119,"width":8,"height":7},"words":"汉"},"住址":{"location":{"top":272,"left":72,"width":22,"height":81},"words":"四川省会理县爱国乡江西湾村马草组28号"},"公民身份号码":{"location":{"top":304,"left":38,"width":15,"height":113},"words":"513425199110012313"},"出生":{"location":{"top":272,"left":102,"width":10,"height":67},"words":"19911001"},"性别":{"location":{"top":273,"left":118,"width":9,"height":8},"words":"男"}}},{"card_info":{"card_location":{"top":235,"left":156,"width":133,"height":198},"card_type":"idcard_front","direction":3,"idcard_number_type":1,"image_status":"normal"},"card_result":{"姓名":{"location":{"top":271,"left":261,"width":11,"height":27},"words":"罗仁智"},"民族":{"location":{"top":311,"left":247,"width":8,"height":7},"words":"汉"},"住址":{"location":{"top":269,"left":203,"width":23,"height":82},"words":"四川省南充市高坪区明竹乡朝阳庵村1组34号"},"公民身份号码":{"location":{"top":303,"left":172,"width":17,"height":108},"words":"511303199002026018"},"出生":{"location":{"top":270,"left":230,"width":12,"height":65},"words":"19900202"},"性别":{"location":{"top":271,"left":245,"width":9,"height":8},"words":"男"}}}]
      }
    },
    watch: {
      fontCount: {
        immediate: true,
        handler (newV) {
          if (newV == 2) {
            console.log('进入了。。。')
            EventBus.$off('incremented')
          }
        }
      }
    },
    mounted () {
      // 监听这两个事件方法 $once 监听一次
      EventBus.$on("incremented", ({num,deg}) => {
        this.fontCount += num
        this.$nextTick(()=>{
            this.backCount += num
            this.degValue += deg;
        })
        console.log(this.fontCount)
      });
      EventBus.$on("decreased", ({num,deg}) => {
          console.log('进入了2222。。。')
          this.fontCount -= num
          this.$nextTick(()=>{
              this.backCount -= num
              this.degValue -= deg;
          })
      });
    },
    created () {
        console.log('进入了。。。')
        console.log('进入了。。。')
        console.log('进入了。。。')
        console.log('进入了。。。')
        console.log('进入了。。。')
        console.log('进入了。。。')
        console.log('进入了。。。')
        console.log('进入了。。。')
        console.log('进入了。。。')
        console.log('进入了。。。')
        console.log('进入了。。。')
        console.log('进入了。。。')
      console.log(this.words_result)
      let arr = []
      this.words_result.map(item => {
        let apply_birthday = ''
        let arr1 = item.card_result['出生'].words.split('')
        arr1.map((item, index) => {
          apply_birthday += item
          if (index === 3 || index === 5) {
            apply_birthday += '-'
          }
        })
        arr.push({
          apply_address: item.card_result['住址'].words,
          apply_idcard: item.card_result['公民身份号码'].words,
          apply_birthday,
          apply_name: item.card_result['姓名'].words,
          apply_sex: item.card_result['性别'].words,
          apply_nation: item.card_result['民族'].words
        })
      })
      console.log(arr)
    },
    methods: {
      send () {
        console.log('进入了。。。')
        // this.$bus.$emit('sendMsg', this.message)
        // this.backCount = this.backCount + 1
        // this.$message.success('成功！')
      },
    }
}
</script>

<style>

</style>